<template>
	<view class="goods-list">
		<!-- 商品列表组件 -->
		<goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
		<!-- 加载中/已加载完提示 -->
		<view class="loading-status" v-if="goods.length > 0">
			<text v-if="isLoading">加载中...</text>
			<text v-if="flag">----我是有底线的----</text>
		</view>
	</view>
</template>

<script>
	// 导入商品列表组件
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default{
		// 1. 修复组件注册属性名：comments → components
		components: {
			"goods-list": goodsList
		},
		data(){
			return{
				pageindex: 1,       // 当前页码
				goods: [],          // 商品列表数据
				flag: false,        // 2. 修复拼写错误：flase → false
				isLoading: false    // 新增：加载中状态
			}
		},
		methods:{
			// 获取商品列表（优化：增加异常处理）
			async getGoodsList(callBack){
				this.isLoading = true  // 开始加载
				try {
					const res = await this.$myRequest({
						url: `/api/getgoods?pageindex=${this.pageindex}`  // 优化：模板字符串更简洁
					})
					// 校验接口返回数据
					if (res.data && res.data.message) {
						this.goods = [...this.goods, ...res.data.message]
						// 若当前页返回数据小于10条，说明已加载完所有数据
						if (res.data.message.length < 10) {
							this.flag = true
						}
					}
				} catch (err) {
					console.error('获取商品列表失败：', err)
					uni.showToast({ title: '加载失败', icon: 'none' })
				} finally {
					this.isLoading = false  // 无论成功失败，结束加载
					callBack && callBack()  // 执行回调（如结束下拉刷新）
				}
			},
			// 跳转商品详情页
			goGoodsDetail(id){
				uni.navigateTo({
					url: `/pages/goods-detail/goods-detail?id=${id}`  // 优化：模板字符串
				})
			}
		},
		onLoad(){
			// 页面加载时初始化商品数据
			this.getGoodsList()
		},
		onReachBottom(){
			// 上拉加载：若已加载完或正在加载，则不重复请求
			if (this.flag || this.isLoading) return
			this.pageindex++
			this.getGoodsList()
		},
		onPullDownRefresh(){
			// 3. 修复：下拉刷新逻辑（重置数据+重新请求+同步结束刷新）
			this.pageindex = 1
			this.goods = []
			this.flag = false
			// 重新请求数据，请求完成后结束下拉刷新
			this.getGoodsList(() => {
				uni.stopPullDownRefresh()
			})
			// 兜底：防止接口卡住，1.5秒后强制结束刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		}
	}
</script>

<style lang="scss">
	// 4. 修复：样式类名匹配（goods-list 而非 goods_list）
	.goods-list {
		background: #eee;
		min-height: 100vh;  // 确保背景铺满屏幕
	}
	// 加载状态样式（合并原 isOver 样式）
	.loading-status {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
		color: #999;  // 灰色更符合提示文字风格
		background: #fff;
	}
</style>